<template>
  <div>

      <mh></mh>

    <main class="" id="main-collapse">

    <div class="hero-full-wrapper">
       <div v-masonry transition-duration="0.3s" item-selector=".grid-item" class="grid">
       <div class="gutter-sizer"></div>
         <div class="grid-sizer"></div>

         <div v-masonry-tile class="grid-item" v-for="item in datalist">
           <img class="img-responsive" alt="" :src="'http://localhost:8000/'+item.img+''" />
           <a :href="'http://localhost:8081/detail?id='+item.id" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>{{ item.title }}</h3>
                 <!-- <p>{{ item.desc }}</p> -->

                 <TextEllipsis :text="item.desc" :height="100" v-width="200">
                    <template slot="more">...</template>
                    <span slot="after">[09/14]</span>
                  </TextEllipsis>


               </div>
             </div>
           </a>
         </div>









       </div>
     </div>


     <!--  分页 -->

    <div>
        <p>pagination: {{pagination}}</p>
        <p><Pagination v-model="pagination" @change="change"></Pagination></p>
      </div>


    </main>





  </div>
</template>



<script>

import mh from './mh.vue'

export default {
  data () {
    return {
      msg: "这是一个变量",
      datalist:[],
      pagination: {
        page: 1,
        size: 1,
        total: 3
      }
    }
  },
  components: {
        'mh':mh
  },
  mounted:function(){

    //获取数据
    var _this = this;
    this.axios.get('http://localhost:8000/clist/',{
}).then(function(result) {

          var mylist = [];
                 console.log(result);
                 _this.datalist = result.data.data;

                 for(let i=0;i<result.data.length;i++){

                  mylist.push(result.data[i].title);

                 }

                 console.log(mylist);


             });


},
  methods:{
      changetest(index){
          this.clicked = index;
      },
      //分页
      change(value) {
      console.log(value);
    },
  }
}


</script>

<style>



</style>
